<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" >
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

	<title>HTML canvas video player</title>

	<link rel="stylesheet" href="https://muffinman.io/skyblue/css/skyblue.css">
	<link rel="stylesheet" href="demo/demo.css">
</head>

<body>
	<div class="header">
		<div class="content">
			<a href="https://github.com/Stanko/html-canvas-video-player" class="padding-right-20">GitHub</a>
			<a href="https://github.com/Stanko/html-canvas-video-player/archive/master.zip">Download</a>
		</div>
	</div>
	<div class="video-wrapper js-video-wrapper">
		<div class="video-responsive">
			<video class="video js-video" muted>
				<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
				<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
				<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
				<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
			</video>

			<canvas class="canvas js-canvas"></canvas>

			<div class="video-timeline js-timeline">
				<div class="video-timeline-passed js-timeline-passed">
				</div>
			</div>
		</div>
	</div>

	<div class="content">
		<h1>Depreciation notice</h1>

		<p>
			This was intended for auto-playing videos on iOS, but as of iOS 10, there is native supported option <code>playsinline</code>, read more here: 
			<a href="https://webkit.org/blog/6784/new-video-policies-for-ios/">
				https://webkit.org/blog/6784/new-video-policies-for-ios/ 
			</a>
			(Android works for ages now). 
		</p>
		<p>
			So this project is not actively maintained anymore. Use native HTML video instead of it.
		</p>
		<p>
			If anyone wants to take over the maintenance, feel free to open an issue, and I'll add you as contributor.
		</p>

			
		<h1 class="margin-bottom-10">HTML canvas video player</h1>
		<h3 class="margin-bottom-20">Easy way to play videos inline on iPhones</h3>
		<p>
			This is intended for iPhone only, it can be used on any other browser
			which support canvas and video. <strike>It doesn't play sound, I have no real
			plan of adding audio support.</strike>
		</p>
		<p>
			Audio is now supported. Autoplay on iOS is NOT working with
			audio (autoplay is disabled in that case).
		</p>
		<p>
			It can be used with any HTML video player, just position canvas over the video.
			Intended usage was for background videos and showcases.
			Still, if you can, use regular HTML5 video, this was intended to use only on iPhones.
			This is plain JavaScript solution, no dependencies, IE9+ and modern browsers.
		</p>

		<p>
			For IE9 there must be <code>requestAnimationFrame</code> polyfill.
			Audio is not tested on IE9.
		</p>

		<p>
			Please let me know if you are using this player, I would like to make a small showcase, thanks!
		</p>

		<h5>Known issues</h5>
		<ul>
			<li>
				It is very buggy and sometimes doesn't work at all on Android.
				I don't have plans for fixing this, if someone has idea, please issue a pull request.
				Just use regular HTML5 video.
			</li>
		</ul>

		<p>
			Download on
			<a href="https://github.com/Stanko/html-canvas-video-player">GitHub</a>.
		</p>

<h4 class="margin-top-30">Minimum setup:</h4>
<pre>
var canvasVideo = new <span class="color-success">CanvasVideoPlayer</span>({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas'
});
</pre>

<h4 class="margin-top-30">Aditional options:</h4>
<pre>
var canvasVideo = new <span class="color-success">CanvasVideoPlayer</span>({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas',
    timelineSelector: '.js-timeline',
    framesPerSecond: 25,
    hideVideo: true, <span class="color-grey">// should script hide the video element</span>
    autoplay: false,
    <span class="color-grey">// <span class="color-error">IMPORTANT</span> On iOS can't be used together with autoplay, autoplay will be disabled</span>
    audio: false, <span class="color-grey">// can be true/false (it will use video file for audio), or selector for a separate audio file</span>
    resetOnLastFrame: true, <span class="color-grey">// should video reset back to the first frame after it finishes playing</span>
		loop: false
});
</pre>

<h4 class="margin-top-30">Methods:</h4>
<pre>
<span class="color-grey">// Unbinds all of the events (when you destroy the player)</span>
canvasVideo.unbind()

<span class="color-grey">// Plays video</span>
canvasVideo.play()

<span class="color-grey">// Pauses video</span>
canvasVideo.pause()

<span class="color-grey">// Plays video if paused and vice versa</span>
canvasVideo.playPause()

<span class="color-grey">// Draws current frame on canvas, should not be called manually</span>
canvasVideo.drawFrame()
</pre>

<h4 class="margin-top-30">Detecting iPhone:</h4>
<pre>
var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
<span class="color-grey">// Other way to detect iOS</span>
<span class="color-grey">// var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);</span>

if (isIphone) {
    <span class="color-grey">// Init CanvasVideoPlayer here</span>
    new <span class="color-success">CanvasVideoPlayer</span>({
        <span class="color-grey">// Options</span>
    });
}
else {
    <span class="color-grey">// Use HTML5 video</span>
}
</pre>


		<p class="margin-top-50">
			Released under MIT licence.
		</p>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="demo/fastclick.js"></script>
	<script src="demo/demo.js"></script>

	<script src="js/canvas-video-player.js"></script>


	<script>
		var canvasVideo = new CanvasVideoPlayer({
			videoSelector: '.js-video',
			canvasSelector: '.js-canvas',
			timelineSelector: '.js-timeline',
			audio: false
		});
	</script>
</body>
</html>
